<template>
  <el-menu 
  :default-active="activeIndex" 
  class="el-menu-demo shadow-drop-2-center header" 
  mode="horizontal" 
  @select="handleSelect"
  router
  >
    <el-menu-item :index="searchSrc">
      <el-input v-model="input" placeholder="请输入内容" suffix-icon="el-icon-search" @keyup.enter.native="isSearchSrc"></el-input>
    </el-menu-item>
    <el-menu-item index="/home">
      <i class="el-icon-s-home"></i>
      首页
    </el-menu-item>
    <el-menu-item index="/study">
        <i class="el-icon-edit"></i>
        学习笔记
    </el-menu-item>
    <el-menu-item index="/talks">
        <i class="el-icon-edit"></i>
        说说
    </el-menu-item>
    <el-menu-item index="/images">
        <i class="el-icon-edit"></i>
        相册
    </el-menu-item>
    <el-menu-item index="about">
      <i class="el-icon-s-promotion"></i>
      关于
    </el-menu-item>
    <el-menu-item index="letter">
      <i class="el-icon-chat-round"></i>
      留言
    </el-menu-item>

    <el-menu-item index="login"  @click="LoginIn">
        <i class="el-icon-user"></i>
        登录
    </el-menu-item>

    <el-submenu index="user" v-show="false">
      <template slot="title">
        <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
      </template>
      <el-menu-item index="user"><i class="el-icon-user-solid"></i>个人中心</el-menu-item>
      <el-menu-item index="home" @click="LoginOut"><i class="el-icon-right"></i>退出登录</el-menu-item>
    </el-submenu>
  </el-menu>
</template>

<script>
export default {
    name:'MyHeader',
    data() {
      return {
        activeIndex: '1',
        loading:true,
        input: '',
        circleUrl: "./images/img.jpg",
        searchSrc:''
      };
    },
    methods: {
      LoginIn(){
        this.loading = true
      },
      LoginOut(){
        this.loading = false
      },
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      },
      isSearchSrc(){
        this.searchSrc="/search"
      },
      goSearch(){
            this.$router.push('/search')
        }
    },
}
</script>

<style scoped>
.header{
    padding-left: 10%;
    font-size:  20px Extra large;
    position: fixed;
    border: none;
    top:0;
    width: 100%;
    background: radial-gradient(circle, rgba(238,174,202,1) 0%, rgba(148,187,233,1) 100%);
}
.el-submenu__title:hover, .el-menu-item:focus, .el-menu-item:hover{
  opacity: 0.6;
}
</style>